<template>
  <div id="collect">
		<!-- 菜单 -->
		<div class="top-warp">
		  <div class="nav">
		    <div :class="{'active':tabType==0}" @click="changeTab(0)">课程</div>
		    <div :class="{'active':tabType==1}" @click="changeTab(1)">专题</div>
		    <div :class="{'active':tabType==2}" @click="changeTab(2)">班级</div>
		  </div>
		</div>
		
		<!--课程-->
		<mescroll-vue ref="mescroll0" v-show="tabType==0" :up="getMescrollUp(0)" @init="mescrollInit0">
		  <ul id="dataList0">
		    <li class="data-li" v-for="item in tab0.list">
		      <div class="con" @click="kecheng(item.id,item.type)">
		      	<!-- <img src="static/img/xianshitehui.png" alt="" class="img1"> -->
		      	<img :src="imgurl+item.thumb" alt="" class="img">
		      	<div class="right">
		      		<p>{{item.name}}</p>
		      		<p class="p1">
		      			<span>{{item.tag_name}}</span>
		      			<span class="now" v-if="Number(item.price)>0">￥{{item.price}}</span>
		      			<span class="now fontcolor" v-else>免费</span>
		      			<span class="before">￥{{item.xprice}}</span>
		      		</p>
		      	</div>
		      </div>
		    </li>
		  </ul>
		</mescroll-vue>
		
		<!-- 专题-->
		<mescroll-vue ref="mescroll1" v-show="tabType==1" :up="getMescrollUp(1)" @init="mescrollInit1">
		    <ul id="dataList1">
				<li class="data-li" v-for="item in tab1.list">
				  <!-- 未付款 -->
					<div class="con" @click="jingpin(item.id)">
						<!--<img src="static/img/xianshitehui.png" alt="" class="img1">-->
						 <img :src="imgurl+item.thumb" alt="" class="img">
						<div class="right">
							 <p>{{item.name}}</p>
							<p class="p1">
								<span>{{item.tag_name}}</span>
					
							 <!-- <span class="now">￥{{item.price}}</span> -->
							 <span class="now" v-if="Number(item.price)>0">￥{{item.price}}</span>
							 <span class="now fontcolor" v-else>免费</span>
							 <span class="before">￥{{item.xprice}}</span>
							</p>
						</div>
					</div>
				</li>
		    </ul>
		</mescroll-vue>
		
		<!-- 班级 -->
		<mescroll-vue ref="mescroll2" v-show="tabType==2" :up="getMescrollUp(2)" @init="mescrollInit2">
		  <ul id="dataList2">
		    <li class="data-li" v-for="item in tab2.list">
		      <div  class="con" @click="banjia(item.id)">
		      		<!--<img src="static/img/xianshitehui.png" alt="" class="img1">-->
		      		<img :src="imgurl+item.thumb" alt="" class="img">
		      		<div class="right">
		      		 <p class="length">{{item.name}}</p>
		      			<p class="p1">
		      				<span>{{item.tag}}</span>
		      				 <!-- <span class="now">￥{{item.price}}</span> -->
		      				 <span class="now" v-if="Number(item.price)>0">￥{{item.price}}</span>
		      				 <span class="now fontcolor" v-else>免费</span>
		      			    <span class="before">￥{{item.xprice}}</span>
		      			</p>
		      		</div>
		      	</div>
		    </li>
		  </ul>
		</mescroll-vue>
  </div>
</template>

<script>
   // 引入mescroll的vue组件
   import MescrollVue from 'mescroll.js/mescroll.vue'
   
   export default {
     name: 'Collect',
     components: {
       MescrollVue
     },
     data () {
       return {
				 imgSrc: require("../../assets/img/kongbai.png"), 
         tab0: {mescroll: null, list: [], isListInit: false}, // 全部
         tab1: {mescroll: null, list: [], isListInit: false}, // 已付款
         tab2: {mescroll: null, list: [], isListInit: false}, // 未付款
         tabType: 0 ,// 菜单类型
   	  imgurl:this.$store.state.img,
   	  chenload:false,
       }
     },
     methods: {
   	  kecheng(id,type){
   	    // console.log(id)
			this.$router.push({
				path:'/course',
				query:{
					cid:id
				}
			})
   	  },
   	  banjia(id){
   	      this.$router.push({
   	      path:'/class',
   	      query:{
   	        bid:id
   	      }
   	    })
   	  },
   	  jingpin(id){
   	      this.$router.push({
   	      path:'/specialtopic',
   	      query:{
   	        stid:id
   	      }
   	    })
   	  },
       // mescroll组件初始化的回调,可获取到mescroll对象
       mescrollInit0 (mescroll) {
         mescroll.tabType = 0; // 加入标记,便于在回调中取到对应的list
         this.tab0.mescroll = mescroll;
       },
       mescrollInit1 (mescroll) {
         mescroll.tabType = 1;
         this.tab1.mescroll = mescroll;
       },
       mescrollInit2 (mescroll) {
         mescroll.tabType = 2;
         this.tab2.mescroll = mescroll;
       },
       
       // 多mescroll的配置,需通过方法获取,保证每个配置是单例
       getMescrollUp (tabType) {
         let emptyWarpId = 'dataList' + tabType;
         return {
           auto: true,
           callback: this.upCallback, // 上拉回调,此处可简写; 相当于 callback: function (page) { upCallback(page); }
           noMoreSize: 5, // 如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
           empty: {
             warpId: emptyWarpId, // 父布局的id;
             icon: this.imgSrc, // 图标,默认null
             tip: '您暂未有收藏', // 提示
             
           },
           
         }
       },
    
       /* 上拉加载的回调 page = {num:1, size:10}; num:当前页 从1开始, size:每页数据条数 */
       upCallback (page, mescroll) {
          if (mescroll.tabType === 0) {
						 // 课程
						this.tab0.isListInit = true;// 标记列表已初始化,保证列表只初始化一次
						this.axios.get(this.$store.state.url +'User/getLiveCollect',{
							 params:{
								page: page.num,
								limit:page.size
							 }
						 }).then(res=>{
											// console.log(res.data.data.class)
							this.chenload = true;
							if(res.data.errcode==0||res.data.errcode=='0'){
							var curPageData = res.data.data.collection;
								mescroll.endSuccess(curPageData.length);// 联网成功的回调,隐藏下拉刷新和上拉加载的状态;
							 if (page.num === 1) this.tab0.list = []; // 如果是第一页需手动制空列表
							 this.tab0.list = this.tab0.list.concat(curPageData); // 追加新数据
							 // this.tab0.list=res.data.data.order
							}
						
						})
					} else if (mescroll.tabType === 1) {
									// 专题
						this.tab1.isListInit = true;// 标记列表已初始化,保证列表只初始化一次
							 this.axios.get(this.$store.state.url +'User/getSpecCollect',{
							 params:{
								page: page.num,
								limit:page.size
							 }
							}).then(res=>{
							// console.log(res.data.data.class)
							this.chenload = true;
							if(res.data.errcode==0||res.data.errcode=='0'){
							var curPageData = res.data.data.collection;
								mescroll.endSuccess(curPageData.length);// 联网成功的回调,隐藏下拉刷新和上拉加载的状态;
							 if (page.num === 1) this.tab1.list = []; // 如果是第一页需手动制空列表
							 this.tab1.list = this.tab1.list.concat(curPageData); // 追加新数据
							 // this.tab0.list=res.data.data.order
							}
							 
							 })
					} else if (mescroll.tabType === 2) {
							 // 未付款
							 this.tab2.isListInit = true;// 标记列表已初始化,保证列表只初始化一次
							 this.axios.get(this.$store.state.url +'User/getClassCollect',{
							 params:{
								page: page.num,
								limit:page.size
							 }
							}).then(res=>{
							// console.log(res.data.data.class)
							this.chenload = true;
							if(res.data.errcode==0||res.data.errcode=='0'){
							var curPageData = res.data.data.collection;
								mescroll.endSuccess(curPageData.length);// 联网成功的回调,隐藏下拉刷新和上拉加载的状态;
							 if (page.num === 1) this.tab2.list = []; // 如果是第一页需手动制空列表
							 this.tab2.list = this.tab2.list.concat(curPageData); // 追加新数据
							 // this.tab0.list=res.data.data.order
							}
							 
							 })
						 }
       },
   
       // 切换菜单
       changeTab (type) {
         let curTab = this.getTabData(this.tabType);// 当前列表
         let newTab = this.getTabData(type);// 新转换的列表
         curTab.mescroll.hideTopBtn(); // 隐藏当前列表的回到顶部按钮
         this.tabType = type // 切换菜单
         if (!newTab.isListInit) {
           newTab.mescroll.triggerDownScroll(); // 加载列表
         } else {
         }
       },
       // 获取菜单对应的数据
       getTabData (tabType) {
         if (tabType == null) tabType = this.tabType;
         if (tabType === 0) {
           return this.tab0;
         } else if (tabType === 1) {
           return this.tab1;
         } else if (tabType === 2) {
           return this.tab2;
         } 
       },
     },
     mounted(){
		 this.sdk.getJSSDK('','',this.$store.state.url);	
   // 	  this.getMescrollUp(this.tabType);
   // 	  this.getMescrollDown(this.tabType)
     }
     
   }
</script>

<style scoped>
	/*以fixed的方式固定mescroll的高度*/
	.mescroll {
	  position: fixed;
	  top: .88rem;
	  bottom: 0;
	  height: auto;
	}
	
	.top-warp{
	  z-index: 9990;
	  position: fixed;
	  top: 0;
	  left: 0;
	  width: 100%;
	  height: .88rem;
	  background-color: white;
	}
	.top-warp .head{
	  width: 100%;
	  height: .88rem;
	  line-height: .88rem;
	  text-align: center;
	}
	.top-warp .nav{
	  text-align: center;
	  height: .8rem;
	  background: white;
		box-shadow:0px 3px 5px 0px rgba(71,68,80,0.06);
		display: flex;
		justify-content: space-around;
	}
	.top-warp .nav > div{
		  font-weight: 600;
	  line-height: .8rem;
	  font-size: .3rem;
		color: #C2C9D3;
	}
	.top-warp .nav .active{
	  border-bottom: 2px solid #0287FF;
	  color: #0287FF;
	}
	
	/*展示上拉加载的数据列表*/
	.data-li{
	  position: relative;
		padding-bottom: .3rem;
	  border-bottom: 1px solid #EDEDED;
	}
  .con{
    width: 92%;
    margin: auto;
    height: 1.18rem;
    margin-top: 0.3rem;
    position: relative;
  }
  .img1{
    position: absolute;
    width: 0.5rem;
    left: 0.1rem;
    top: 0;
  }
  .img{
    width:2.1rem;
    height:100%;
    border-radius:0.08rem;
    float: left;
  }
  .right{
    margin-left: 2.3rem;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
  }
  .right p{
    width: 100%;
  }
  .right p:nth-child(1){
    font-size:0.28rem;
    color:rgba(51,51,51,1);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .p1 span:nth-child(1){
    display: inline-block;
    text-align: center;
   padding: 0 0.17rem 0 0.17rem;
    height:0.37rem;
    background:rgba(255,255,255,1);
    border:0.02rem solid rgba(2,135,255,1);
    border-radius:0.19rem;
    font-size:0.24rem;
    color:rgba(2,135,255,1);
    line-height:0.32rem;
  }
  .before{
    font-size:0.24rem;
    text-decoration:line-through;
    color:rgba(194,201,211,1);
    float: right;
    margin-top: 0.04rem;
    margin-right: 0.2rem;
  }
  .now{
    font-size:0.3rem;
    font-weight:bold;
    color:rgba(255,2,20,1);
    float: right;
  }
  .length{
    height: 0.8rem;
    overflow: hidden;
  }
</style>
